<template>
  <div class="Login">
      <img src="../assets/heading.png" style="width:100%;" alt="">
      <div style="display:flex;flex-direction:column;height:150px;justify-content: space-between;align-items:center;margin-top:20%;">
        <div style="display:flex;justify-content:flex-start;align-items: center;border-bottom:1px solid #c5c5c5;width:90%;margin:0 auto">
          <van-icon name="user-o" color="#5c48c5"/>
          <input v-model="telephone" class="One_input" type="text" style="border:0;outline: none;margin-left:30px;color:#a5a4a4;" placeholder="请输入手机号">
        </div>
        <div style="display:flex;justify-content:flex-start;align-items: center;border-bottom:1px solid #c5c5c5;width:90%;margin:0 auto">
          <van-icon name="eye-o" color="#5c48c5"/>
          <input v-model="password" class="One_input" type="password" style="border:0;outline: none;margin-left:26px;color:#a5a4a4;" placeholder="请输入操作密码">
        </div>
      </div>
      <button @click="Logins()" style="margin:0 auto;margin-top:20%;display:flex;justify-content: center;align-items: center;border:1px solid #5c48c5;height:40px;width:70%;border-radius:40px;">
         <span style="font-size:20px;color:#946ed3;font-weight:600;">登陆</span>
      </button>
      <p @click="$router.push('/profile')" style="color:#925df4;font-size:16px;margin-top:5%;text-align: center;font-weight:600;">忘记密码</p>
      <van-dialog v-model="Dialog_zero" :show-confirm-button="false" class="yanzheng">
        <div style="text-align: center;position: absolute;top:16%;left:23%;">
          <h3 style="color:#fde3b7;font-size:20px;">登陆帐号为手机号</h3>
          <h3 style="color:#fde3b7;font-size:20px;">登录密码为提现密码</h3>
          <img src="../assets/funs.png" style="width:150px;margin-top:0;margin-left:0" alt="">
        </div>
        <div class="confirms" @click="Dialog_zero = false">
          确认
        </div>
      </van-dialog>
      <div style="margin:0 auto;text-align: center;margin-top:15%;display:flex;flex-direction: column;">
         <span style="color:#946ed3;font-size:16px;font-weight:600;">第三方登录</span>
      </div>
      <img @click="Wechat()" src="../assets/threes.png" style="display: block;margin:0 auto;margin-top:30px;" alt="">
  </div>
</template>

<script>
  import { Login } from "../api/api";
  import aestool from '@/utils/aestool.js';
  export default {
    name: "Login",
    data() {
      return {
        telephone:"",
        Dialog_zero:true,
        password:""
      }
    },
    methods: {
      //微信登陆
      Wechat(){
         this.$toast('暂无微信登录')
      },
      //登录
      Logins(){
        if(this.telephone == ''){
            this.$toast('手机号为空')
        }else if(this.password == ''){
          this.$toast('密码为空')
        }else{
          let params = {
            username:aestool.encrypt(this.telephone, '123456asdzSignin'),
            password:aestool.encrypt(this.password, '123456asdzSignin'),
          }
          Login(params).then((res)=>{
            localStorage.setItem('xfq_token',res.Data)
            if(res.Status == 200){
              this.$toast({
                type:'success',
                message:'登录成功'
              })
              setTimeout(()=>{
                this.$router.push('/home')
              },1000)
            }else if(res.Message =='帐号出了一点状况~'){
                this.$toast('旺旺有问题请联系客服换旺旺')
            }else{
              this.$toast({
                type:'error',
                message:res.Message
              })
            }
          })
        }
      }
    },
    created() {
      if(this.$route.query.phone && this.$route.query.password){
         this.telephone = this.$route.query.phone
         this.password = this.$route.query.password
         this.Logins()
      }
    }
  }
</script>

<style scoped>
  .Login {
    width: 100%;
    height: 100%;
  }
  .One_input{
     font-size:16px;
  }
  .One_input::placeholder{
    color:#a5a4a4;
    font-size:14px;
  }
  .confirms{
    width:80%;
    font-size: 16px;
    border-radius: 10px;
    height: 40px;
    position: absolute;
    bottom: 5%;
    left:10%;
    display: flex;
    color:black;
    font-weight:600;
    justify-content: center;
    align-items: center;
    background:white;
  }
  .yanzheng {
    background-size:100% 100%;
    background:rebeccapurple;
    height:400px;
    width:80%;
    font-size: 18px;
    border-radius:20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
